import React from 'react'
import { IndexLink, Link } from 'react-router'
import classes from './Header.css'
import phone from '../../assets/images/phone.png'

export const Header = () => (
  <div>
    <div className="c-navTop--default-height">
      <div className="c-nav c-navtop">
          <div className="c-container">
              <div className="l-nav">
                  <div className="fl l-nav__item--first">
                      <div className="c-nav__logo">
                          <a className="fl" href="#">
                              <img src={phone} alt="点击跳转代码工场首页"/>
                          </a>
                          <p className="fl m-top STKaiti">华南软件新锐第一品牌</p>
                      </div>
                  </div>
                  <div className="l-nav__item-top--last fr">
                      <div className="c-nav__logo">
                          <a className="fl" href="#">
                              <img src={phone} alt="服务热线"/>
                          </a>
                          <div>
                              <p className="fl m-top--0 m-left--5">专业业务咨询</p>
                              <p className="fl m-top--0 m-left--5 c-main-color">134-2870-5963</p>
                          </div>
                          <div>
                              <p className="fl m-top--5 m-left--5">全国服务热线</p>
                              <p className="fl m-top--5 m-left--5 c-main-color">440-066-9987</p>
                          </div>
                      </div>
                  </div>
                  <div className="clearfix"></div>
              </div>
          </div>
      </div>
  </div>
  <div className="c-nav--default-height">
      <div className="c-nav" id="c-navId">
          <div className="c-container">
              <div className="l-nav">
                  <div className="l-nav__item l-nav__item--left l-nav__item--first c-nav-tab c-nav-tab--red">
                      <div className="c-nav-div--font to-click">
                          <a className="c-nav-tab--active-main-color" href="./index.html">首页</a>
                      </div>
                  </div>
                  <div className="l-nav__item l-nav__item--left c-nav-tab c-nav-tab--red">
                      <div className="c-nav-div--font to-click">
                          <a className="c-nav-tab--active-main-color" href="./new.html">全新机展示</a>
                      </div>
                  </div>
                  <div className="l-nav__item l-nav__item--left c-nav-tab c-nav-tab--red">
                      <div className="c-nav-div--font to-click">
                          <a className="c-nav-tab--active-main-color" href="./old.html">旧机展示</a>
                      </div>
                  </div>
                  <div className="l-nav__item l-nav__item--left c-nav-tab c-nav-tab--red">
                      <div className="c-nav-div--font to-click">
                          <a className="c-nav-tab--active-main-color" href="servo.html">伺服节能改造</a>
                      </div>
                  </div>
                  <div className="l-nav__item l-nav__item--left c-nav-tab c-nav-tab--red">
                      <div className="c-nav-div--font to-click">
                          <a className="c-nav-tab--active-main-color" href="other.html">其他处理设备</a>
                      </div>
                  </div>
                  <div className="l-nav__item l-nav__item--left c-nav-tab c-nav-tab--red">
                      <div className="c-nav-div--font to-click">
                          <a className="c-nav-tab--active-main-color" href="about.html">关于我们</a>
                      </div>
                  </div>
                  <div className="clearfix"></div>
              </div>
          </div>
      </div>
  </div>
    <IndexLink to="/" activeClassName={classes.activeRoute}>
      Home
    </IndexLink>
    {' · '}
    <Link to="/counter" activeClassName={classes.activeRoute}>
      Counter
    </Link>
  </div>
)

export default Header
